<template>
    <el-dialog v-model="state.showDialog" title="选择用户" width="70%">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="system-dialog-search mb15">
                <span class="p_el_input">工号：<el-input size="default" v-model="state.pagenation.code" placeholder="请输入工号"
                        clearable />
                </span>
                <span class="p_el_input">姓名: <el-input size="default" v-model="state.pagenation.name" placeholder="请输入姓名"
                        clearable />
                </span>
                <!-- <el-select size="default" v-model="state.pagenation.genger" placeholder="请选择性别" clearable
                    style="max-width: 180px">
                    <el-option label="男" :value="0"></el-option>
                    <el-option label="女" :value="1"></el-option>
                </el-select> -->
                <el-button size="default" type="primary" class="ml10" @click="getTableData">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="submitOn">
                    确认
                </el-button>
            </div>
            <el-table border :data="state.userList" @selection-change="selectedChange" v-loading="state.loading"
                style="width: 100%" ref="tableRef">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column prop="序号" label="序号" width="60" />
                <el-table-column label="工号" prop="code"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
            </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 50, 200, 800]" v-model:current-page="state.pagenation.pageNum" background
                v-model:page-size="state.pagenation.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="state.pagenation.total">
            </el-pagination>
        </el-card>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus';

// 定义变量内容
const emit = defineEmits(['refresh'])
const tableRef = ref()

const getPagenation = () => {
    return {
        code: '',
        name: '',
        genger: 1,
        pageNum: 1,
        pageSize: 10,
        total: 1
    }
}

const state = reactive({
    code: '',
    showDialog: false,
    loading: false,
    pagenation: getPagenation(),
    selectedCodeList: [] as string[],
    userList: [] as any[],
})

// 初始化表格数据
const getTableData = () => {

}

// 分页改变
const onHandleSizeChange = (val: number) => {
    state.pagenation.pageSize = val;
    getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.pagenation.pageNum = val;
    getTableData();
};
const submitOn = () => {
    if (state.selectedCodeList.length === 0) {
        ElMessage.error('所选人员不能为空')
        return
    }
    if (state.selectedCodeList.length > 1) {
        ElMessage.error('只能选择一个上级负责人')
        return
    }
    emit('refresh', state.selectedCodeList)
    state.showDialog = false
    // 清空表格已选数据
    tableRef.value.clearSelection()
}

// 打开dialog
const openUSerDialog = (code: string) => {
    state.code = code
    state.showDialog = true
    getTableData();
}
const selectedChange = (codes: any) => {
    state.selectedCodeList = []
    codes.forEach((item: any) => {
        state.selectedCodeList.push(item)
    })
    console.log(state.selectedCodeList);
}
defineExpose({
    openUSerDialog
})

</script>

<style lang="scss" scoped></style>